<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script type="text/javascript">
<!--

function filterKey(evt) {
	var theEvent = evt || window.event;
	var key = theEvent.keyCode || theEvent.which;
	key = String.fromCharCode( key );
	var regex = /[0-9]|\./;
	if( !regex.test(key) ) {
	  theEvent.returnValue = false;
	  theEvent.preventDefault();
	}
}

function filterCategories() {
	var prefix = $('searchBox').value;
	if (prefix == '') {
		var choose = $('chooser');
		while (choose.getElementsByTagName('option').length > 0) {
			choose.removeChild(choose.getElementsByTagName('option')[0]);
		}
		$('chooser').selectedIndex = 0;
	} else {
		new Ajax.Request(
			'${scriptPath}?action=category.ajaxsearch&prefix=' + prefix,
			{
				method : 'get',
				onSuccess : function(transport) {
					var choose = $('chooser');
					while (choose.getElementsByTagName('option').length > 0) {
						choose.removeChild(choose.getElementsByTagName('option')[0]);
					}

					var categoryArr = transport.responseText.evalJSON();
					for (i = 0; i < categoryArr.length; i++) {
						category = categoryArr[i];
						if (category.questionCount <= 0) {
							continue;
						}
						var option = document.createElement('option');
						option.value = category.id;
						option.innerHTML = category.name + ' (' + category.questionCount + ')';
						choose.insertBefore(option, $('noneOption'));
					}
					$('chooser').selectedIndex = 0;
				},
				onFailure: function(){ alert('Something went wrong...') }
			}
		);
	}
}

//-->
</script>

${message}

<form action="${scriptPath}">
	<input type="hidden" name="action" value="test.addquestion"></input>
	<input type="hidden" name="id" value="${test.id}"></input>
	
	<div>
		<label><input type="radio" ${(empty param.mode || param.mode=='id') ? 'checked' : ''} 
			id="type-id" name="mode" value="id"></input>
		Nhập ID câu hỏi:</label> 
		${idErr}
		
		<input type="text" name="tq_question" id="tq_question" value="${param.questionId}"
			onfocus="$('type-id').checked = 'checked'"></input>	
	</div>
	<div>
		<label><input type="radio" id="type-random" name="mode" 
			"${param.mode=='random' ? 'checked' : ''} value="random"></input>
		Chọn ngẫu nhiên:</label>
		

		<p>Thể loại:
			<select id="chooser" name="tq_category" size="10"
				onfocus="$('type-random').checked = 'checked'">
			</select><br />
			<label>Tìm kiếm: 
				<input type="text" name="tq_searchBox"
					value="${param.tq_searchBox}" id="searchBox"
					onkeydown="setTimeout(filterCategories, 100); return true";
					onfocus="$('type-random').checked = 'checked'"></input>
			</label>
			<script type="text/javascript">
				filterCategories();
			</script>
			${categoryErr}
		</p>

		<p><label>Số lượng: 
			<input type="text" name="tq_quantity" 
				value="${(empty param.tq_quantity) ? 1 : param.tq_quantity}" 
				onkeypress="filterKey(event)" onfocus="$('type-random').checked = 'checked'">
				</input></label>
		</p>
		
	</div>

	<button type="submit" name="tq_submit" value="add">Lưu</button>
	<button type="submit" name="tq_submit" value="addAndMore">Lưu và thêm nữa</button>
	<button type="button" onclick="location.href='${scriptPath}?action=test.view&id=${test.id}'">Thôi</button>
	
</form>

<script>
	$('questionId').focus();
</script>